Purpose

Several text colors in the PC builder's compatibility panel did not meet the WCAG AA contrast ratio of 4.5:1 on the bg-surface background (#485458): red-500 (2.05:1), orange-500 (2.79:1) and text-secondary (3.62:1). The yellow and green status colors also fell short (4.10:1 and 3.53:1). This PR raises them to at least 4.5:1 while keeping the existing design.

Changes

• Add four status color tokens to colors.css (status-incompatible, status-warning, status-unknown, status-compatible) and use them in the compatibility panel instead of Tailwind's red/orange/yellow/green 500. The four colors share the same lightness and saturation, so they look like one set, and each is at least 4.5:1 on both the surface and background colors.

Contrast on #485458: incompatible 2.05 → 4.72, warning 2.71 → 4.97, unknown 4.10 → 5.13, compatible 3.53 → 5.31, secondary 3.62 → 4.70.

Related issues

Closes #90

Verification

Automated checks, run from frontend:

• npx vitest run all tests pass

Screenshots